import { useState, useEffect } from 'react';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components'
import IconButton from './components/iconButton';
import * as Type from './type'

export default function SwiperComponent(props: { swiperList: Type.SwiperItem[] | Type.SwiperItem[][], type: "image" | "button" }) {
    const { swiperList, type } = props;
    const [list, setList] = useState<any>([])
    const groupArray = (arr: any[], size: number): any[][] => {
        const result: any = [];
        for (let i = 0; i < arr.length; i += size) {
            result.push(arr.slice(i, i + size));
        }
        return result;
    };
    useEffect(() => {
        if (type === 'button') {
            setList(groupArray(swiperList, 6));
        }
    }, [])
    return (
        <Swiper style={{ padding: '10px', height: type === 'image' ? '240px' : '' }}>
            {/* Image Type */}
            {
                type === 'image' && swiperList.map((item, index) => (
                    <SwiperItem key={index}>
                        <View style={{ borderRadius: '10px', overflow: 'hidden' }}>
                            <Image style={{ width: '100%' }} src={item.img || ''} />
                        </View>
                    </SwiperItem>
                ))
            }
            {/* Button Type */}
            {
                type === 'button' && list.map((item, index) => (
                    <SwiperItem key={index}>
                        <View style={{ backgroundColor: 'rgba(255, 165, 0, 0.2)', padding: '10px', borderRadius: '10px'}}>
                            {
                                (item || []).map((button, buttonIndex) => (
                                    <View key={buttonIndex} style={{ display: 'inline-block', width: '33.33%', textAlign: 'center', height: '75px' }}>
                                        <IconButton icon={button.icon} onClick={button.onClick} />
                                        <View>{button.icon}</View>
                                    </View>
                                ))
                            }
                        </View>
                    </SwiperItem>
                ))
            }
        </Swiper>
    )
}
